<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>年份应收统计表</title>

    <!-- 引入 css -->
    <link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="/admin/plugin/wangEditor/index.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>
	<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>


    <!--    引入Layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <link rel="stylesheet" href="/admin/js-css/css/listvue.css"  media="all" >

</head>
<body>
    <div id="app">
        <div>
            <div class="demoTable" style="padding: 5px;">
                <el-form :inline="true" size="small"   ref="listSearch"  >
                    <el-form-item :label="item.lable+'：'" v-for="(item,index) in listSearch" >
                        <!--模糊搜索-->
                        <template  v-if="item.gs == '' || item.gs=='0' || item.gs=='4' || item.gs == '6'"  >

                            <template v-if="item.type == '0'">
                                <el-input style="width:180px" v-model="searchInputDtos[item.key].value"  ></el-input>
                            </template>

                            <!--下拉框多选-->
                            <template v-if="item.type == '6' || item.type=='8'" >
                                <el-select  multiple
                                            filterable style="width:180px"
                                            v-model="searchInputDtos[item.key].values"  >
                                    <el-option value="" ></el-option>
                                    <el-option :value="vm.value"  :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                                </el-select>
                            </template>

                            <template v-if="item.type == '11'" >
                                <el-cascader  :ref="item.key" size="mini" @change="handleChange(item.key)" clearable
                                              v-model="searchInputDtos[item.key].value"  :props="cascaderProps[item.key]"
                                ></el-cascader>
                            </template>

                            <!--日期框-->
                            <template v-if="item.type == '1'">
                                <el-date-picker value-format="yyyy-MM-dd"
                                                v-model="searchInputDtos[item.key].value"  style="width:180px"
                                                type="date" >
                                </el-date-picker>
                            </template>

                            <!--日期框时分秒-->
                            <template v-if="item.type == '5'">
                                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"
                                                v-model="searchInputDtos[item.key].value"  style="width:180px"
                                                type="datetime" >
                                </el-date-picker>
                            </template>

                        </template>

                        <!--大于小于输入框-->
                        <template  v-if="item.gs=='1'"  >
                            <template v-if="item.type == '0'">
                                <el-input style="width:180px"  v-model="searchInputDtos[item.key].searchTypeForDateDto.start"  ></el-input>
                                <el-input style="width:180px"  v-model="searchInputDtos[item.key].searchTypeForDateDto.end"  ></el-input>
                            </template>

                            <!--下拉框多选-->
                            <template v-if="item.type == '6' || item.type=='8'" >
                                <el-select filterable style="width:180px"
                                           v-model="searchInputDtos[item.key].searchTypeForDateDto.start" >
                                    <el-option value="" ></el-option>
                                    <el-option :value="vm.value" :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                                </el-select>

                                <el-select  filterable style="width:180px"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.end" >
                                    <el-option value="" ></el-option>
                                    <el-option :value="vm.value" :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                                </el-select>
                            </template>

                            <template v-if="item.type == '11'" >
                                <el-cascader  :ref="item.key" size="mini" @change="handleChange(item.key)" clearable
                                              v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :props="cascaderProps[item.key]"
                                ></el-cascader>
                                <el-cascader  :ref="item.key" size="mini" @change="handleChange(item.key)" clearable
                                              v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :props="cascaderProps[item.key]"
                                ></el-cascader>
                            </template>

                            <!--日期框-->
                            <template v-if="item.type == '1'">
                                <el-date-picker value-format="yyyy-MM-dd"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.start" style="width:180px"
                                                type="date" >
                                </el-date-picker>
                                <el-date-picker value-format="yyyy-MM-dd"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.end" style="width:180px"
                                                type="date" >
                                </el-date-picker>
                            </template>

                            <!--日期框时分秒-->
                            <template v-if="item.type == '5'">
                                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.start" style="width:180px"
                                                type="datetime" >
                                </el-date-picker>
                                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.end" style="width:180px"
                                                type="datetime" >
                                </el-date-picker>
                            </template>

                        </template>

                        <!--大于条件-->
                        <template  v-if="item.gs=='2'"  >
                            <template v-if="item.type == '0'">
                                <el-input style="width:180px"  v-model="searchInputDtos[item.key].searchTypeForDateDto.start"  ></el-input>
                            </template>

                            <!--下拉框多选-->
                            <template v-if="item.type == '6' || item.type=='8'" >
                                <el-select filterable style="width:180px"
                                           v-model="searchInputDtos[item.key].searchTypeForDateDto.start" >
                                    <el-option value="" ></el-option>
                                    <el-option :value="vm.value" :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                                </el-select>
                            </template>

                            <template v-if="item.type == '11'" >
                                <el-cascader  :ref="item.key" size="mini" @change="handleChange(item.key)" clearable
                                              v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :props="cascaderProps[item.key]"
                                ></el-cascader>
                            </template>

                            <!--日期框-->
                            <template v-if="item.type == '1'">
                                <el-date-picker value-format="yyyy-MM-dd"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.start" style="width:180px"
                                                type="date" >
                                </el-date-picker>
                            </template>

                            <!--日期框时分秒-->
                            <template v-if="item.type == '5'">
                                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.start" style="width:180px"
                                                type="datetime" >
                                </el-date-picker>
                            </template>

                        </template>

                        <!--小于条件-->
                        <template  v-if="item.gs=='3'"  >
                            <template v-if="item.type == '0'">
                                <el-input style="width:180px"  v-model="searchInputDtos[item.key].searchTypeForDateDto.end"  ></el-input>
                            </template>

                            <!--下拉框多选-->
                            <template v-if="item.type == '6' || item.type=='8'" >

                                <el-select  filterable style="width:180px"
                                            v-model="searchInputDtos[item.key].searchTypeForDateDto.end" >
                                    <el-option value="" ></el-option>
                                    <el-option :value="vm.value"  :label="vm.showValue" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</el-option>
                                </el-select>
                            </template>

                            <template v-if="item.type == '11'" >
                                <el-cascader  :ref="item.key" size="mini" @change="handleChange(item.key)" clearable
                                              v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :props="cascaderProps[item.key]"
                                ></el-cascader>
                            </template>

                            <!--日期框-->
                            <template v-if="item.type == '1'">
                                <el-date-picker value-format="yyyy-MM-dd"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.end" style="width:180px"
                                                type="date" >
                                </el-date-picker>
                            </template>

                            <!--日期框时分秒-->
                            <template v-if="item.type == '5'">
                                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"
                                                v-model="searchInputDtos[item.key].searchTypeForDateDto.end" style="width:180px"
                                                type="datetime" >
                                </el-date-picker>
                            </template>

                        </template>
                    </el-form-item>

                </el-form>

                <template v-if="JSON.stringify(listSearch) != '{}'">
                    <button class="layui-btn"  onclick="vm.getHead()">搜索</button>
                    <button class="layui-btn"  onclick="vm.f_search_advanced()">高级检索</button>
                    <button class="layui-btn"  onclick="vm.f_search_custom()">自定义搜索</button>
                </template>


            </div>

            <!-- 分割线-->
            <el-divider style="margin: 3px 0;"   ></el-divider>
            <el-row style="margin-bottom: 4px;" >
                <template v-for="item in buttons"  >
                    <template v-if="!item.custom">
                        <el-button type="primary" style="margin-left: 1px;" v-if="item.type == 0" :item="JSON.stringify(item)" size="small" :icon="item.icon_path"  onclick="vm.f_add(this)">{{item.name}}</el-button>
                        <el-button type="primary" style="margin-left: 1px;" v-if="item.type == 1" :item="JSON.stringify(item)"  size="small" :icon="item.icon_path" up=true   onclick="vm.f_update(this)">{{item.name}}</el-button>
                        <el-button type="primary" style="margin-left: 1px;" v-if="item.type == 2" :item="JSON.stringify(item)" size="small"  :icon="item.icon_path"  onclick="vm.f_delete(this)">{{item.name}}</el-button>
                        <el-button type="primary" style="margin-left: 1px;" v-if="item.type == 3" :item="JSON.stringify(item)" size="small"  :icon="item.icon_path"  onclick="vm.f_post_confirm(this)">{{item.name}}</el-button>
                        <el-button type="primary" style="margin-left: 1px;"  v-if="item.type == 4" :icon="item.icon_path" size="small"   onclick="vm.f_set_list()">列表自定义</el-button>
                        <el-button type="primary" style="margin-left: 1px;"  v-if="item.type == 5" :icon="item.icon_path"  size="small"  onclick="vm.f_set_input()">录入自定义</el-button>
                        <el-button type="primary"  style="margin-left: 1px;" v-if="item.type == 6" :icon="item.icon_path"  size="small"  onclick="vm.f_set_order()">排序自定义</el-button>
                        <el-button type="primary"  style="margin-left: 1px;" v-if="item.type == 7" :icon="item.icon_path" size="small"  :item="JSON.stringify(item)"  onclick="vm.f_exp(this)">{{item.name}}</el-button>
                        <el-button type="primary"  style="margin-left: 1px;" v-if="item.type == 8" :icon="item.icon_path" size="small"  :item="JSON.stringify(item)"  onclick="vm.exportLocal(this)">{{item.name}}</el-button>

                    </template>

                    <template v-if="item.custom" >
                        <el-button type="primary" :icon="item.icon_path" style="margin-left: 1px;"  :item="JSON.stringify(item)" size="small"    @click="vm.callFunModule(item.custom_data_zygl_id)"  >{{item.name}}</el-button>
                    </template>

                </template>


            </el-row>


            <el-table
                    size="small"
                    :data="tableData"
                    :height="tableHeight"
                    style="width: 100%">
                <el-table-column
                        v-for="(item,index) in tableHead"
                        :prop="item.key"
                        :label="item.lable">
                    <template v-if="item.listmx.length>0">
                        <el-table-column v-for="(subitem,index) in item.listmx"
                                         :prop="subitem.key"
                                         :label="subitem.lable" >
                        </el-table-column>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="total">
            </el-pagination>

        </div>
    </div>
</body>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            tableId:getTableId("712"),
            listSearch: {}//默认查询的字段
            , searchInputDtos: {},
            pageNumber:1,
            total:0,
            pageSize:0,
            tableHead:[],
            tableData: [],
            tableHeight:0,
            buttons: [],
            buttons_rows:[],
            buttons_rows_len:0,
            updateButtonItem:{},//修改按钮上面的item属性值
        },
        created(){
            this.tableHeight = parseInt(window.screen.height)-420;
            this.getCustomFields();
            // this.getHead();
        },
        methods:{
            async f_exp(o){
                let btn = {
                    btn: ['关闭']
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                let item = $(o).attr("item");
                console.log("item_add:"+item);
                item = JSON.parse(item);
                let listother = {};
                try {
                    copy(top.data.treeNodeObj,listother);
                    copy({ids:top.data.param.ids},listother);
                }catch (e){}
                top.data.listother = listother;
                const res = await postBody("/admin/api/DataManagementController/expExcel",{searchInputDtos:vm.searchInputDtos,tableId:item.custom_data_zygl_id,other:listother});
                top.alert(res.msg);
                top.f_layer_open_get("/admin/html/dataManagement/expexcel-getpro.html", "60%", "25%", function () {

                }, btn, "数据导出")
            },
            async getCustomFields(){
                const res = await postBody("/admin/api/DataManagementController/getCustomFields",{tableId: getTableId("712"),mapdata:{}})
                vm.listSearch = res.data.listSearch;
                vm.searchInputDtos = res.data.listSearch;
                //设置按钮
                vm.buttons = res.data.buttons;
                vm.buttons_rows = res.data.buttons_rows;
                vm.buttons_rows_len = res.data.buttons_rows_len;
                for(let a=0;a<vm.buttons.length;a++){
                    let btn = vm.buttons[a];
                    if(btn.type == "1"){
                        this.updateButtonItem = btn;
                        break;
                    }
                }
            },
            //开始翻页
            handleCurrentChange(val){
                this.pageNumber = val;
                this.getData();
            },
            async getHead(){
                let i = load();
                this.tableHead = [];
                const res = await postWebCustom(getTableId("722"),{"searchInputDtos":JSON.stringify(this.searchInputDtos)});
                layer.close(i);
                this.tableHead = res.data;
                await postBody("/admin/api/DataManagementController/getCustomFields",{tableId: getTableId("712"),mapdata:{}})
                this.getData();
            },
            async getData(){
                let i = load();
                this.tableData = [];
                const res = await postWebCustom(getTableId("723"),{pageNumber:""+this.pageNumber,"searchInputDtos":JSON.stringify(vm.searchInputDtos)});
                this.tableData = res.data.rows;
                this.total = parseInt(res.data.total);
                this.pageSize = parseInt(res.data.pageSize);
                layer.close(i);
            },
            f_search_advanced() {
                let btn = {
                    btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //按钮【按钮一】的回调
                        let win = getTopIframe(layero);
                        let data = win.getData();
                        vm.searchInputDtos = data;
                        top.layer.closeAll();
                        vm.getHead();
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                top.data.zygl_id = vm.tableId;
                top.f_layer_open_get("/admin/html/dataManagement/advancedRetrieval.html", "40%", "60%", function () {

                }, btn, "高级检索")
            },
            f_search_custom() {
                let btn = {
                    btn: ['关闭']
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                top.data.custom = "IS_SEARCH";
                top.data.zygl_id = vm.tableId;
                top.f_layer_open_get("/admin/html/dataManagement/custom_search.html", "80%", "65%", function () {

                }, btn, "自定义搜索")
            },
        }
    });
</script>
</html>